



// 封装一个获取dom对象的方法
function $(selector) {
    var dom = document.querySelectorAll(selector);

    if (dom.length == 1) {
        return dom[0];
    }

    return dom;
}

var minnav=$(".minbar_list li a");
var maxnav=$(".navbar-nav.mr-auto li")


var rotation = $(".rotation");
var banner = $(".rotation .center");

var bannerImgsUl = $(".center .left ul");
var bannerWidth = 730;
var btn_rt = $(".btn_rt");
var btn_lt = $(".btn_lt");

var dotLis = $(".suoyin ul li");
// console.log(dotLis);
// console.log(btn_lt);






// 排他函数
function paita(dom){
    for(var i=0;i<dom.length;i++){
        dom[i].onclick=function(){
            // console.log(this);
            for(var j=0;j<dom.length;j++){
                dom[j].classList.remove("active");
            }
            this.classList.add("active");
        }
    }
}

/* ------头部 start-----*/ 

// max-nav导航条
paita(maxnav);

// min-nav导航条
paita(minnav);

 

/*  -------轮播图 start------- */

var flag = true;

// 定义一个变量，保存当前轮播图的序号
var currentImgIndex = 1;

// 定义一个变量，保存小圆点高亮部分
var circleIndex = 0;

// 默认显示图片1
bannerImgsUl.style.transform = `translateX(${-bannerWidth * currentImgIndex}px)`;

rotation.style.backgroundImage = `url(./images/bg0${currentImgIndex}.jpg) `;

//  右侧按钮
btn_rt.onclick = function () {
    if (flag) {
        flag = false;
        // 自加1;
        currentImgIndex++;
        bannerImgsUl.style.transform = `translateX(${-bannerWidth * currentImgIndex}px)`;
        rotation.style.backgroundImage = `url(./images/bg0${currentImgIndex}.jpg) `;
        // 添加过渡
        bannerImgsUl.style.transition = "transform 0.3s";

        // 功能2: 点击右侧按钮,小圆圈跟随变化
        for (var i = 0; i < dotLis.length; i++) {
            dotLis[i].classList.remove("active");
        }
        // 自加1
        circleIndex++;

        if (circleIndex >= 7) {// 边界判断
            circleIndex = 0;
        }

        // 高亮
        dotLis[circleIndex].classList.add("active");
    }
}


// 绑定过渡完成事件
bannerImgsUl.ontransitionend = function () {
    if (currentImgIndex >7) {
        currentImgIndex = 1;
        // 变形位移
        bannerImgsUl.style.transform = `translateX(${-bannerWidth * currentImgIndex}px)`;
        rotation.style.backgroundImage = `url(./images/bg0${currentImgIndex}.jpg) `;
        // 添加过渡
        bannerImgsUl.style.transition = "none";
    } else if (currentImgIndex <= 0) {
        currentImgIndex = 7;

        // 变形位移
        bannerImgsUl.style.transform = `translateX(${-bannerWidth * currentImgIndex}px)`;
        rotation.style.backgroundImage = `url(./images/bg0${currentImgIndex}.jpg) `;
        // 添加过渡
        bannerImgsUl.style.transition = "none";
    }

    // 重新开启节流阀开关
    flag = true;
}

// 功能3: 实现左侧按钮功能
btn_lt.onclick = function () {
    if (flag) {
        flag = false;

        // 自减1
        currentImgIndex--;
        // 变形位移
        bannerImgsUl.style.transform = `translateX(${-bannerWidth * currentImgIndex}px)`;
        rotation.style.backgroundImage = `url(./images/bg0${currentImgIndex}.jpg) `;
        // 添加过渡
        bannerImgsUl.style.transition = "transform 0.3s";

       
        for (var i = 0; i < dotLis.length; i++) {
            dotLis[i].classList.remove("active");
        }
        // 自减1
        circleIndex--;

        if (circleIndex < 0) {// 边界判断
            circleIndex = 6;
        }

        // 高亮
        dotLis[circleIndex].classList.add("active");
    }
}

//  被点击小圆圈高亮,并且滚动到对应图片
for (var i = 0; i < dotLis.length; i++) {
    // 设置自定义属性
    dotLis[i].setAttribute("data-index", i);
    // 给小圆点绑定点击事件
    dotLis[i].onclick = function () {
        // 获取自定属性
        var liIndex = Number(this.getAttribute("data-index"));

        

        // 修改circleIndex的值
        circleIndex = liIndex;

        // 告诉currentImgIndex变量现在的值
        currentImgIndex = liIndex + 1;

        // 变形位移
        bannerImgsUl.style.transform = `translateX(${-bannerWidth * currentImgIndex}px)`;
        rotation.style.backgroundImage = `url(./images/bg0${currentImgIndex}.jpg) `;

        // 添加过渡
        bannerImgsUl.style.transition = "transform 0.3s";

        // 高亮当前li
        for (var j = 0; j < dotLis.length; j++) {
            dotLis[j].classList.remove("active");
        }
        this.classList.add("active");
    }
}


// 自动播放功能(鼠标移上轮播图层以后停止定时器,鼠标移出轮播图层以后重新开启定时器)
var timer = null;
// 自动轮播的方法
function autoPlay() {
    if (timer === null) {
        timer = window.setInterval(function () {
           
            btn_rt.onclick();
        }, 3500);
    }
}
// 调用自动轮播
autoPlay();

// 停止自动轮播
function stopPlay() {
    window.clearInterval(timer);
    timer = null;
}

// .banner鼠标移上事件
banner.onmouseover = function () {
    stopPlay();
}

// .banner鼠标移出事件
banner.onmouseout = function () {
    autoPlay();
}

